<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>零基础HTML编码</title>
</head>
<body>
    <h1>网站一级标题</h1>
    <ul>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#">导航链接二</a></li>
        <li><a href="#">导航链接三</a></li>
        <li><a href="#">导航链接四</a></li>
    </ul>
    <h3>文章一级标题</h3>
    <h3>文章二级标题</h3>
    <p>文章发表时间babababababbababbab</p>
    <p>这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，</p>
    <p>这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，
        <a href="http://ife.baidu.com">链接到百度前端学院</a>
        这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，
    </p>
    <img src="https://git.oschina.net/uploads/60/750660_xzcGG.png?1487906883" alt="">
    <p>这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，</p>
    <p>这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，
        <a href="http://ife.baidu.com">链接到百度前端学院</a>
        这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，这是很长的段落，
    </p>
    <img src="https://git.oschina.net/uploads/60/750660_xzcGG.png?1487906883" alt="">
    <h4>无需列表</h4>
    <ul>
        <li>列表1</li>
        <li>列表二</li>
        <li>列表三</li>
    </ul>
    <h4>有序列表</h4>
    <ol>
        <li>列表1</li>
        <li>列表二</li>
        <li>列表三</li>
    </ol>

    <dl>
        <dt>hello</dt>
        <dd>xiaming</dd>
    </dl>
    <p>好看的图片</p>
    <img src="https://git.oschina.net/uploads/60/750660_xzcGG.png?1487906883" alt="">
    <p>好看的图片</p>
    <img src="https://git.oschina.net/uploads/60/750660_xzcGG.png?1487906883" alt="">
    <p>好看的图片</p>
    <img src="https://git.oschina.net/uploads/60/750660_xzcGG.png?1487906883" alt="">
    <h2>最后一篇文章一级标题</h2>
    <h3>文章的二级标题</h3>

    <table border="1"> 
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>            
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容二</td>
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容二</td>
        </tr>
    </table>

	<p>address 标签</p>
    <address>
		<label for="mail">输入你的邮箱</label>
		<input type="text" name="mail" id="mail" value="邮箱地址">
    </address>

	<abbr title="attribute">Est, esse.</abbr>

	<map name="primary" width="300" height="400">
		<area shape="circle" coords="75,75,75" href="" alt="" onclick="alert(left)">
		<area shape="circle" coords="275,75,75" href="" alt="" onclick="alert(right)">
	</map>

	<article>
		<header>
			<h2>jurse park</h2>
		</header>
		<section>
			<p>great!</p>
			<aside>
				<p>the movie earned &78</p>
			</aside>
		</section>
		<footer>
			footer part
		</footer>
	</article>

	<table>
        <caption>Awesome caption</caption>
        <colgroup>
            <col style="background-color: #0f0">
            <col span="1">
            <col style="background-color: red">
        </colgroup>
        <tr>
            <th>Lime</th>
            <th>Lemon</th>
            <th>Orange</th>
        </tr>
        <tr>
            <td>Green</td>
            <td>Yellow</td>
            <td>Orange</td>
        </tr>
    </table>

	 <form action="getform.php" method="get">
        <label>First name:
            <input type="text">
        </label>
        <br>
        <label>Last name:
            <input type="text">
        </label>
        <br>
        <label>E-mail:
            <input type="email">
        </label>
        <br>
        
		<label for="man">男<input type="radio" name="sex" id="man"></label>
		<label for="women">女<input type="radio" name="sex" id="women"></label>
		<br>
		<label for="sport"><input type="checkbox" name="sport" id="sport" value="">运动</label>
		<label for="art"><input type="checkbox" name="art" id="art" value="">艺术</label>
		<label for="sian"><input type="checkbox" name="sian" id="sian" value="">科学</label>
		<br>
		<label for="city">
			城市：
			<select>
				<option value="北京" selected>北京</option>
				<option value="上海">上海</option>
				<option value="广东">广东</option>
			</select>
		</label>
		<br>
		<textarea rows="5" cols="30" placeholder="请输入您的个人描述"></textarea>
		<br>
		<input type="submit" value="Submit">
    </form>

	<footer>
		版权所有&copy;
	</footer>
</body>
</html>